<template>
  <div class="page">
    <section class="sec-1">
      <echarts-temp :options="options" @itemClick="itemClick"></echarts-temp>
    </section>
    <section class="sec-1">
      <echarts-temp :options="option" @itemClick="itemClick"></echarts-temp>
    </section>
    <section class="sec-2">
      <div>
        <div style="width:100%;text-align:center;color:#999;">接入终端数</div>
        <div style="width:100%;text-align:center;color:#45d96a;">90</div>
        <div class="content" style="height:15%">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
        <div class="circle"></div>
      </div>
      <div>
        <div style="width:100%;text-align:center;color:#999;">接入电能表数</div>
        <div style="width:100%;text-align:center;color:#ffa761;">90</div>
        <div class="content" style="height:45%">
          <div class="top"></div>
          <div class="bottom"></div>
        </div>
        <div class="circle"></div>
      </div>
    </section>
    <section class="sec-1">
      <echarts-temp :options="option1" @itemClick="itemClick"></echarts-temp>
    </section>
  </div>
</template>
<script>
import $ from "jquery"
export default {
  name: "Welcome",

  data() {
    return {
      options: {},
      yData: [111111110, 1111110.05],
      option: {},
      seriesData1: [
        {
          value: 0,
          name: "单轨"
        },
        { value: 0, name: "双轨" },
        { value: 1110, name: "未部署" }
      ],
      option1: {}
    }
  },
  created() {
    console.log($, "ju5555555555")
    // console.log(_, 'ju5555555555')
    this.init()
  },
  methods: {
    itemClick(params) {
      console.log(params)
    },
    init() {
      let _this = this
      const xAxisData = [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业"
        ],
        series1 = [200, 300, 300, 900, 1500, 1200, 600],
        series2 = [200, 300, 300, 900, 1500, 1200, 600],
        series3 = [200, 300, 300, 900, 1500, 1200, 600],
        series4 = [200, 300, 300, 900, 1500, 1200, 600],
        series5 = [12.3, 100, 30, 73.8, 12.3, 100, 0.01]
      let seriesData = [...series1, ...series2, ...series3, ...series4]
      // 左y轴数据显示整数
      let yMaxData = 0,
        yMinData = 0 //y轴最大值
      yMaxData =
        Math.max(...seriesData) > yMaxData ? Math.max(...seriesData) : yMaxData // 获取数据最大值
      yMaxData = yMaxData + 5 - (yMaxData % 5) //取与数据最大值相近的5的倍数;
      yMinData =
        Math.min(...seriesData) > yMinData ? Math.min(...seriesData) : yMinData // 获取数据最小值
      // 右y1轴数据显示整数
      let yMaxData1 = 0,
        yMinData1 = 0 //y轴最大值
      yMaxData1 =
        Math.max(...series5) > yMaxData1 ? Math.max(...series5) : yMaxData1 // 获取数据最大值

      if (yMaxData1 < 9.5) {
        yMaxData1 = yMaxData1 + 0.5 - (yMaxData1 % 0.005) //取与数据最大值相近的5的倍数;
      }
      yMinData1 =
        Math.min(...series5) > yMinData1 ? Math.min(...series5) : yMinData1 // 获取数据最小值
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          confine: true
        },
        // 修改图表的大小
        grid: {
          left: "0",
          top: "10",
          right: "0",
          bottom: "10",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisTick: {
              show: false
            },
            // 修改刻度标签相关样式
            axisLabel: {
              fontSize: 12,
              color: "#666"
            },
            // 不显示x坐标轴的样式
            axisLine: {
              show: false
            }
          }
        ],
        dataZoom:
          xAxisData.length > 5
            ? [
                {
                  type: "slider",
                  height: 8,
                  xAxisIndex: [0],
                  bottom: "0",
                  start: 0,
                  end: Math.floor((5 / xAxisData.length) * 100),
                  handleSize: "20%",
                  showDetail: false,
                  showDataShadow: false,
                  backgroundColor: "#f5f7f7",
                  borderColor: "#f5f7f7",
                  fillerColor: "#ccc",
                  brushSelect: false
                },
                {
                  type: "inside"
                }
              ]
            : [],
        yAxis: [
          {
            type: "value",
            min: yMinData,
            max: yMaxData,
            interval: (yMaxData - yMinData) / 5,
            // 修改刻度标签相关样式
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: "#666"
            },
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {}
            }
          },
          {
            type: "value",
            min: yMinData1,
            max: yMaxData1,
            interval: (yMaxData1 - yMinData1) / 5,
            // 修改刻度标签相关样式
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: "#666"
            },
            axisLine: {
              lineStyle: {
                color: "#eee"
              }
            },
            // y轴分割线的颜色
            splitLine: {
              lineStyle: {}
            }
          }
        ],
        series: [
          {
            name: "今年就业",
            type: "bar",
            stack: "就业",
            yAxisIndex: 0,
            data: series1
          },
          {
            name: "去年就业",
            type: "bar",
            stack: "就业",
            yAxisIndex: 0,
            data: series2
          },
          {
            name: "今年失业",
            type: "bar",
            stack: "失业",
            yAxisIndex: 0,
            data: series3
          },
          {
            name: "去年失业",
            type: "bar",
            stack: "失业",
            yAxisIndex: 0,
            data: series4
          },
          {
            name: "计量点普查率",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#FD9E4C"
              }
            },
            data: series5
          }
        ]
      }
      this.option = {
        grid: {
          top: 10,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          data: ["接入终端数", "接入电能表数"],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: "#fff"
            },
            margin: 30 // 刻度标签与轴线之间的距离。
          }
        },
        yAxis: {
          max: Math.max(...this.yData) + Math.max(...this.yData) * 0.5,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [80, 25],
            symbolOffset: [0, -12],
            z: 12,
            data: [
              {
                name: "接入终端数",
                value: this.yData[0],
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: "#45d96A" // 圆柱顶部颜色
                  }
                }
              },
              {
                name: "接入电能表数",
                value: this.yData[1],
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: "#FFA761" // 圆柱顶部颜色
                  }
                }
              }
            ]
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [80, 25],
            symbolOffset: [0, 12],
            z: 12,
            data: [
              {
                name: "接入终端数",
                value: 1,
                itemStyle: {
                  normal: {
                    color: "#45d96A" // 圆柱底部颜色
                  }
                }
              },
              {
                name: "接入电能表数",
                value: 1,
                itemStyle: {
                  normal: {
                    color: "#FFA761" // 圆柱底部颜色
                  }
                }
              }
            ]
          },

          {
            name: "",
            type: "pictorialBar",
            symbolSize: [110, 40],
            symbolOffset: [0, 30],
            z: 1,
            data: [
              {
                name: "接入终端数",
                value: 1,
                itemStyle: {
                  normal: {
                    color: "transparent",
                    borderColor: "#999", // 底部外圆圈颜色
                    borderType: "dashed",
                    borderWidth: 2
                  }
                }
              },
              {
                name: "接入电能表数",
                value: 1,
                itemStyle: {
                  normal: {
                    color: "transparent",
                    borderColor: "#999", // 底部外圆圈颜色
                    borderType: "dashed",
                    borderWidth: 2
                  }
                }
              }
            ]
          },
          {
            type: "bar",
            silent: true,
            barWidth: 80,
            barGap: "-100%",
            data: [
              {
                name: "接入终端数",
                value: this.yData[0],
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: 10,
                    textStyle: {
                      color: "#45d96A", // 柱子对应数值颜色
                      fontSize: 12
                    },
                    formatter(params) {
                      let a =
                        _this.changeUnit(params.value, "台").value +
                        _this.changeUnit(params.value, "台").unit
                      return a
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "rgba(69, 217, 106,0.9)"
                  }
                }
              },
              {
                name: "接入电能表数",
                value: this.yData[1],
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: 10,
                    textStyle: {
                      color: "#FFA761", // 柱子对应数值颜色
                      fontSize: 12
                    },
                    formatter(params) {
                      let a =
                        _this.changeUnit(params.value, "只").value +
                        _this.changeUnit(params.value, "只").unit
                      return a
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "rgba(255, 167, 97,0.9)"
                  }
                }
              }
            ]
          },
          {
            type: "bar",
            silent: true,
            barWidth: 80,
            barGap: "-100%",
            data: [
              {
                name: "接入终端数",
                value: this.yData[0] + Math.max(...this.yData) * 0.4 + 200,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: -10,
                    textStyle: {
                      color: "#999", // 柱子对应数值颜色
                      fontSize: 12
                    },
                    formatter(params) {
                      return params.name
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "rgba(69, 217, 106,0.2)"
                  }
                }
              },
              {
                name: "接入电能表数",
                value: this.yData[1] + Math.max(...this.yData) * 0.4 + 200,
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    distance: -10,
                    textStyle: {
                      color: "#999", // 柱子对应数值颜色
                      fontSize: 12
                    },
                    formatter(params) {
                      return params.name
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: "rgba(255, 167, 97,0.2)"
                  }
                }
              }
            ]
          }
        ]
      }
      this.option1 = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          containLabel: true
        },
        legend: {
          show: false,
          orient: "horizontal",
          // formatter: param => {
          //   return (
          //     '{title|' +
          //     param +
          //     '}\n{value|' +
          //     this.changeUnit(
          //       this.seriesData1.filter(v => v.name === param)[0].value,
          //       '家'
          //     ).value +
          //     '}{title|' +
          //     this.changeUnit(
          //       this.seriesData1.filter(v => v.name === param)[0].value,
          //       '家'
          //     ).unit +
          //     '}'
          //   )
          // },
          // textStyle: {
          //   rich: {
          //     title: {},
          //     value: {
          //       color: '#000'
          //     }
          //   }
          // },
          icon: "circle",
          itemGap: 20,
          itemWidth: 5,
          itemHeight: 5,
          selectedMode: false,
          data: this.seriesData1
        },
        series: [
          {
            radius: ["45%", "75%"],
            center: ["50%", "50%"],
            type: "pie",
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 40
              }
            },
            label: {
              normal: {
                formatter: function(params) {
                  let str = "{rate|" + params.percent + "%}"
                  return str
                },
                padding: [0, -30],
                height: 30,
                rich: {
                  // a: {
                  //   height: 0,
                  //   lineHeight: 20,
                  // },
                  rate: {}
                }
              }
            },
            data: this.seriesData1
          }
        ]
      }
    },
    changeUnit(value = "0", unit = "") {
      let returnObj = {
        value: "",
        unit: ""
      }
      value = String(value)
      if (value.split(".")[0].length >= 9) {
        // 转换亿单位
        value = (parseFloat(value) / 100000000).toFixed(2)
        unit = "亿" + unit
      } else if (value.split(".")[0].length >= 5) {
        // 转换万单位
        value = (parseFloat(value) / 10000).toFixed(2)
        unit = "万" + unit
      } else if (value.split(".").length > 1) {
        // 携带小数点
        value = parseFloat(value).toFixed(2)
      }
      returnObj.value = value
      returnObj.unit = unit
      return returnObj
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  overflow-y: auto;
  section {
    height: 300px;
    width: 49%;
    padding: 16px 16px;
    margin-bottom: 10px;
    border: 1px solid #eee;
  }
}
.sec-2 {
  display: flex;
  justify-content: space-around;
  > div {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    height: 80%;
    width: 10%;
    .circle {
      position: absolute;
      left: 50%;
      // top: 50%;
      bottom: 17px;
      width: 130%;
      height: 50px;
      border: 2px dashed #999;
      border-radius: 50%;
      transform: translate(-50%, 95%) rotateX(60deg);
      z-index: 0;
    }
    &:nth-child(1) {
      background: rgba(69, 217, 106, 0.2);
      .content {
        position: relative;
        width: 100%;
        margin-top: 20px;
        background: rgba(69, 217, 106, 0.9);
        .top,
        .bottom {
          position: absolute;
          width: 100%;
          height: 50px;
          border-radius: 50%;
          background: #45d96a;
          transform: rotateX(70deg);
          z-index: 2;
        }
        .top {
          top: -25px;
        }
        .bottom {
          bottom: -25px;
        }
      }
    }
    &:nth-child(2) {
      background: rgba(255, 167, 97, 0.2);
      .content {
        position: relative;
        width: 100%;
        margin-top: 20px;
        background: rgba(255, 167, 97, 0.9);
        .top,
        .bottom {
          position: absolute;
          width: 100%;
          height: 50px;
          border-radius: 50%;
          background: #ffa761;
          transform: rotateX(70deg);
          z-index: 2;
        }
        .top {
          top: -25px;
        }
        .bottom {
          bottom: -25px;
        }
      }
    }
  }
}
</style>
